<template>
    <div class="page-product">
        <el-row>
            <el-col :span="19">
                <crumbs :keyword="keyword"/>
                <categroy :types="types" :areas="areas"/>
                <list @changeLocation="changeLocation" :list="list"/>
            </el-col>
            <el-col :span="5">
                <amap v-if="point.length" :width="230" :height="290" :point="point"/>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Crumbs from '@/components/products/crumbs'
import Categroy from '@/components/products/categroy'
import List from '@/components/products/list'
import Amap from '@/components/public/map'
export default {
    data() {
        return {
            list: [],
            types: [],
            areas: [],
            keyword: '',
            list: [],
            point: [],
            id: `map`,
            key: '11721c56459a26f1e6d1f5bf933281f9'
        }
    },
    components: {
        Crumbs,
        Categroy,
        List,
        Amap
    },
    // async asyncData(ctx) {
    //     let keyword = ctx.query.keyword
    //     console.log(keyword)
    // }

    async asyncData(ctx) {
        let keyword = ctx.query.keyword
        let city = ctx.store.state.geo.position.city

        let {status,data: {count,pois}} = await ctx.$axios.get('/search/resultsByKeywords', {
            params: {
                keyword,
                city
            }
        })
        let {status: status2, data: {areas,types}} = await ctx.$axios.get('/categroy/crumbs', {
            params: {
                city: ctx.store.state.geo.position.city
            }
        })
        if (status2 === 200 && status === 200 && count > 0) {
            return {
                list: pois.filter(item => item.photos.length).map((item) => {
                    return {
                        type: item.type,
                        img: item.photos[0].url,
                        name: item.name,
                        comment: Math.floor(Math.random() * 10000),
                        rate: Number(item.biz_ext.rating),
                        price: Number(item.biz_ext.cost),
                        scene: item.tag,
                        tel: item.tel,
                        status: '可定明日',
                        location: item.location,
                        module: item.type.split(';')[0]
                    }
                }),
                keyword,
                areas: areas.filter(item => item.type !== '').slice(0,5),
                types: types.filter(item => item.type !== '').slice(0,5),
                point: (pois.find(item => item.location).location || '').split(',')
            }
            
        }


    },
    mounted() {
        localStorage.setItem('list',JSON.stringify(this.list))
    },
    methods: {
        changeLocation(location) {
            this.point = location.split(',')
            // console.log(this.point)
        }
    }
}
</script>

<style lang="scss">
    // @import "@/assets/css/products/index.scss"  ;
</style>


